<template>
  <view v-if="visible" class="overlay" @click="onBg">
    <view class="modal" @click.stop>
      <view class="header">
        <text class="title">事件抉择</text>
        <view class="badges">
          <text v-if="event?.isAI" class="badge ai">{{ event?.aiTag || 'AI生成' }}</text>
          <text v-if="buffs?.torch" class="badge torch">火把</text>
          <text v-if="buffs?.trap" class="badge trap">陷阱</text>
        </view>
        <view class="timer" v-if="countdownLeft > 0">{{ countdownLeft }}s</view>
        <button class="close" @click="$emit('close')">✕</button>
      </view>
      <view class="inv-summary">
        <view class="inv-item"><text>木材</text><text class="val">×{{ inventory?.wood || 0 }}</text></view>
        <view class="inv-item"><text>石头</text><text class="val">×{{ inventory?.stone || 0 }}</text></view>
        <view class="inv-item"><text>藤蔓</text><text class="val">×{{ inventory?.vine || 0 }}</text></view>
        <view class="inv-item"><text>淡水</text><text class="val">×{{ inventory?.water || 0 }}</text></view>
      </view>
      <view class="scene">
        <image v-if="event?.image" :src="event.image" class="scene-img" mode="aspectFill"/>
        <text class="scene-text">{{ event?.scene || '……' }}</text>
      </view>
      <view class="options">
        <button
          v-for="(opt, i) in (event?.options || [])"
          :key="i"
          class="opt-btn"
          :disabled="(countdownLeft === 0 && hasCountdown) || !meetsRequirements(opt)"
          :class="[ riskClass(opt.risk), { disabled: !meetsRequirements(opt) } ]"
          @click="$emit('select', opt)"
        >
          <view class="opt-row">
            <text class="opt-label">{{ opt.label }}</text>
            <text v-if="opt.risk" class="risk-badge">{{ opt.risk }}</text>
          </view>
          <view v-if="opt.hints" class="opt-hints">{{ opt.hints }}</view>
          <view v-if="opt.requirements && opt.requirements.length" class="reqs">
            <text class="req-title">需求:</text>
            <text class="req-item" v-for="(r,idx) in opt.requirements" :key="idx">{{ r }}</text>
            <text v-if="!meetsRequirements(opt)" class="req-fail">资源不足</text>
          </view>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    visible: { type: Boolean, default: false },
    event: { type: Object, default: null },
    inventory: { type: Object, default: () => ({}) },
    buffs: { type: Object, default: () => ({ torch: false, trap: false }) }
  },
  data() {
    return { countdownLeft: 0, timerId: null }
  },
  computed: {
    hasCountdown() { return !!(this.event && (this.event.countdownSeconds || this.event.countdown)) }
  },
  watch: {
    visible(newVal) { if (newVal) this.startCountdown(); else this.stopCountdown() },
    event() { this.startCountdown() }
  },
  methods: {
    onBg() { this.$emit('close') },
    riskClass(risk) {
      switch ((risk || '').toLowerCase()) {
        case '高': case 'high': return 'risk-high'
        case '中': case 'mid': case 'medium': return 'risk-mid'
        case '低': case 'low': return 'risk-low'
        default: return ''
      }
    },
    meetsRequirements(opt) {
      const req = opt && opt.requires
      if (!req) return true
      const inv = this.inventory || {}
      // 支持道具/加成需求：如 { torch:1 }
      return Object.keys(req).every(k => {
        if (['torch','trap'].includes(k)) return !!(this.buffs && this.buffs[k])
        return (inv[k] || 0) >= req[k]
      })
    },
    startCountdown() {
      this.stopCountdown()
      const sec = (this.event && (this.event.countdownSeconds || this.event.countdown)) || 0
      this.countdownLeft = sec
      if (!sec) return
      this.timerId = setInterval(() => {
        if (this.countdownLeft > 0) this.countdownLeft -= 1
        if (this.countdownLeft === 0) {
          this.stopCountdown()
          const opts = (this.event && this.event.options) || []
          const available = opts.filter(o => this.meetsRequirements(o))
          const def = available.find(o => o.default) || available[0] || opts[0]
          if (def) this.$emit('select', def)
        }
      }, 1000)
    },
    stopCountdown() { if (this.timerId) { clearInterval(this.timerId); this.timerId = null } }
  },
  beforeDestroy() { this.stopCountdown() }
}
</script>

<style scoped>
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 2000; }
.modal { width: 90%; max-width: 720rpx; background: #0f172a; border: 1rpx solid #334155; border-radius: 16rpx; overflow: hidden; color: #e2e8f0; }
.header { display: flex; align-items: center; gap: 10rpx; justify-content: space-between; padding: 16rpx 20rpx; background: #1e293b; border-bottom: 1rpx solid #334155; }
.title { font-size: 28rpx; font-weight: bold; color: #f8fafc; }
.badges { display: flex; gap: 8rpx; align-items: center; }
.badge { font-size: 20rpx; padding: 2rpx 8rpx; border-radius: 10rpx; color: #fff; background: #334155; border: 1rpx solid rgba(255,255,255,0.2); }
.badge.torch { background: #f59e0b; }
.badge.trap { background: #10b981; }
.badge.ai { 
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%); 
  animation: aiPulse 2s infinite;
  font-weight: bold;
}
.timer { font-size: 24rpx; color: #fcd34d; margin-left: auto; margin-right: 12rpx; }
.close { background: #ef4444; color: #fff; border: none; border-radius: 8rpx; padding: 6rpx 12rpx; font-size: 22rpx; }
.inv-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8rpx; padding: 10rpx 12rpx; background: #0b1220; border-bottom: 1rpx solid #1f2937; }
.inv-item { display: flex; align-items: center; justify-content: space-between; background: #111827; border: 1rpx solid #374151; border-radius: 8rpx; padding: 6rpx 8rpx; font-size: 20rpx; }
.scene { padding: 16rpx 20rpx; display: grid; gap: 12rpx; }
.scene-img { width: 100%; height: 220rpx; border-radius: 8rpx; object-fit: cover; }
.scene-text { font-size: 24rpx; color: #cbd5e1; line-height: 1.6; }
.options { display: grid; gap: 12rpx; padding: 0 20rpx 20rpx; }
.opt-btn { text-align: left; background: #111827; border: 1rpx solid #374151; color: #e5e7eb; border-radius: 12rpx; padding: 14rpx; }
.opt-btn.disabled { opacity: 0.5; }
.opt-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6rpx; }
.opt-label { font-size: 24rpx; font-weight: bold; color: #e5e7eb; }
.risk-badge { font-size: 20rpx; padding: 2rpx 8rpx; border-radius: 10rpx; background: #4b5563; color: #fff; }
.opt-hints { font-size: 20rpx; color: #9ca3af; margin-bottom: 4rpx; }
.reqs { display: flex; flex-wrap: wrap; gap: 8rpx; align-items: center; }
.reqs .req-title { font-size: 20rpx; color: #cbd5e1; }
.req-item { font-size: 20rpx; color: #93c5fd; background: rgba(59,130,246,0.15); border: 1rpx solid rgba(59,130,246,0.35); padding: 2rpx 8rpx; border-radius: 8rpx; }
.req-fail { font-size: 20rpx; color: #fca5a5; margin-left: 8rpx; }

/* 风险色阶 */
.risk-low { border-color: rgba(16,185,129,0.45) !important; }
.risk-mid { border-color: rgba(245,158,11,0.45) !important; }
.risk-high { border-color: rgba(239,68,68,0.6) !important; }

/* AI标识动画 */
@keyframes aiPulse {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.8; 
    transform: scale(1.05);
  }
}
</style> 